<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css">
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<body>
		<div id="app">
			<h2>基础用法</h2>
			<el-steps :active="active" finish-status="success">
				<el-step title="步骤 1"></el-step>
				<el-step title="步骤 2"></el-step>
				<el-step title="步骤 3"></el-step>
			</el-steps>

			<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
		</div>
		<br />

		<div id="app2">
			<h2>含状态步骤条</h2>
			<el-steps :space="200" :active="1" finish-status="success">
				<el-step title="已完成"></el-step>
				<el-step title="进行中"></el-step>
				<el-step title="步骤 3"></el-step>
			</el-steps>
		</div>
		<br />
		<div id="app3">
			<h2>有描述的步骤条</h2>
			<el-steps :active="1">
				<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
				<el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
				<el-step title="步骤 3" description="这段就没那么长了"></el-step>
			</el-steps>
		</div>
		<br />
		<div id="app4">
			<h2>居中的步骤条</h2>
			<el-steps :active="2" align-center>
				<el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
				<el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
				<el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
				<el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
			</el-steps>
		</div>
		<br />
		<div id="app5">
			<h2>带图标的步骤条</h2>
			<el-steps :active="1">
				<el-step title="步骤 1" icon="el-icon-edit"></el-step>
				<el-step title="步骤 2" icon="el-icon-upload"></el-step>
				<el-step title="步骤 3" icon="el-icon-picture"></el-step>
			</el-steps>
		</div>
		<br />
		<div id="app6">
			<h2>竖式步骤条</h2>
			<el-steps direction="vertical" :active="1">
				<el-step title="步骤 1"></el-step>
				<el-step title="步骤 2"></el-step>
				<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
			</el-steps>
		</div>
		<br />
		<div id="app7">
			<h2>简洁风格的步骤条</h2>
			<el-steps :active="1" simple>
				<el-step title="步骤 1" icon="el-icon-edit"></el-step>
				<el-step title="步骤 2" icon="el-icon-upload"></el-step>
				<el-step title="步骤 3" icon="el-icon-picture"></el-step>
			</el-steps>

			<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
				<el-step title="步骤 1"></el-step>
				<el-step title="步骤 2"></el-step>
				<el-step title="步骤 3"></el-step>
			</el-steps>
		</div>
	</body>
	<script>
		var Main = {
			data() {
				return {
					active: 0
				};
			},

			methods: {
				next() {
					if (this.active++ > 2) this.active = 0;
				}
			}
		}
		var Ctor = Vue.extend(Main)
		new Ctor().$mount('#app')
		//demo2
		new Vue().$mount('#app2');
		//demo3
		new Vue().$mount('#app3');
		//demo4
		new Vue().$mount('#app4');
		//demo5
		new Vue().$mount('#app5');
		//demo6
		new Vue().$mount('#app6');
		//demo7
		new Vue().$mount('#app7');
	</script>
</html>
